<template>
	<view class="content with-tabbar">
		<div v-if="!prePage" class="fontS48 lh-72 font-weight pl-30 pr-30 pt-42 pb-30 por-fixed bg-f7">工作经历</div>
		<div v-if="!prePage" class="h-124 bg-f7 w-p100"></div>
		<scroll-view class=" pb-18 pl-30 pr-30 bg-fff" style="white-space: normal;" scroll-y>
			<div class=" ">
				<div class="lh-70 flex align-center pb-15 bor-b resume-box pt-15">
					<div class="resume-title fontS28 color-3">企业名称</div>
					<div class="fontS28 color-0d0 resume-input">
						<input type="text" placeholder="企业名称" v-model="postForm.companyName" />
					</div>
				</div>
				<view class=" resume-box lh-70 flex align-center pb-15 bor-b pt-15" @click="goIndustry">
					<view class="form-label resume-title fontS28 color-3"> 所属行业 </view>
					<view class="form-cnt">
						<div class="radio" :class="industryName ? '' : 'color-80'">{{ industryName ||
							'职位类型'
						}}</div>
					</view>
					<div class="ml-auto iconfont icon-youjiantou"></div>
				</view>
				<view class=" resume-box lh-70 flex align-center pb-15 bor-b pt-15" @click="showProfession">
					<view class="form-label resume-title fontS28 color-3"> 职位名称 </view>
					<view class="form-cnt">
						<div class="radio" :class="professionName ? '' : 'color-80'">{{ professionName || '任职职位' }}
						</div>
					</view>
					<div class="ml-auto iconfont icon-youjiantou"></div>
				</view>
				<picker mode="date" @change="change($event, 'start')" :range="sexList" fields="month">
					<view class=" resume-box lh-70 flex align-center pb-15 bor-b pt-15">
						<view class="form-label resume-title fontS28 color-3"> 在职开始时间 </view>
						<view class="form-cnt">
							<div class="radio" :class="postForm.startWorkDate ? '' : 'color-80'">{{
								postForm.startWorkDate || '在职时间' }}</div>
						</view>
						<div class="ml-auto iconfont icon-youjiantou"></div>
					</view>
				</picker>

				<picker mode="date" @change="change($event, 'end')" :range="sexList" fields="month">
					<view class=" resume-box lh-70 flex align-center pb-15 bor-b pt-15">
						<view class="form-label resume-title fontS28 color-3"> 在职结束时间 </view>
						<view class="form-cnt">
							<div class="radio" :class="postForm.endWorkDate ? '' : 'color-80'">{{ postForm.endWorkDate
								|| '在职时间' }}</div>
						</view>
						<div class="ml-auto iconfont icon-youjiantou"></div>
					</view>
				</picker>
				<view class=" resume-box lh-70 flex align-center pb-15 bor-b pt-15" @click="toAdvantage">
					<view class="form-label resume-title fontS28 color-3"> 职业优势 </view>
					<view class="form-cnt">
						<div class="radio" :class="postForm.careerAdvantages ? '' : 'color-80'">{{
							postForm.careerAdvantages
							|| '职业优势' }}</div>
					</view>
					<div class="ml-auto iconfont icon-youjiantou"></div>
				</view>
				<view class=" resume-box lh-70  pb-15 bor-b pt-15">
					<view class="form-label resume-title fontS28 color-3"> 工作内容 </view>
					<view class="form-cnt">
						<textarea name="" v-model="postForm.workContent" placeholder="工作内容"></textarea>
					</view>

				</view>
				<view class=" resume-box lh-70 flex align-center pb-15 bor-b pt-15">
					<view class="form-label resume-title fontS28 color-3"> 屏蔽该公司 </view>
					<view class=" ml-auto">
						<u-switch v-model="postForm.isShield" activeColor="#34a76c" size="20"
							@change="changeSwitch($event, 'isShield')"></u-switch>
					</view>

				</view>
				<view class=" resume-box lh-70 flex align-center pb-15  pt-15">
					<view class="form-label resume-title fontS28 color-3">实习经历 </view>
					<view class=" ml-auto">
						<u-switch v-model="postForm.isInternship" activeColor="#34a76c" size="20"
							@change="changeSwitch($event, 'isInternship')"></u-switch>

					</view>

				</view>
			</div>
		</scroll-view>
		<!-- 职业列表 -->
		<div class="profession-cover" v-if="professionStatus" @click="professionStatus = false"></div>
		<div class="profession-box flex" v-if="professionStatus">
			<div class="profession-left">
				<scroll-view style="height:600upx" scroll-y>
					<div v-for="(item, index) in ProfessionList" :key="index"
						:class="professionIndex === index ? 'active' : ''" @click="changeTab(item, index)">
						{{ item.text }}
					</div>
				</scroll-view>
			</div>
			<div class="profession-right">
				<scroll-view style="height:600upx" scroll-y>
					<div v-for="(item, index) in ProfessionList[professionIndex].professionDtos" :key="index"
						@click="changeSub(item)">
						{{ item.text }}
					</div>
				</scroll-view>
			</div>
		</div>
		<div class="bottom">
			<div v-if="!prePage" class="submitBtn fontS26" @click="toNext('skip')">跳过
			</div>
			<div v-if="!prePage" class="submitBtn fontS26 ml-30" @click="toNext('next')">下一步
			</div>
			<div v-if="prePage" class="submitBtn fontS26" @click="toNext('save')">保存
			</div>

		</div>



	</view>
</template>

<script>
import { onLineResume, findProfessionTree, addResumeWork, editResumeWork } from '@/api/resume'
const api = require("@/api/api.js").api;
export default {
	computed: {
		userInfo() {
			console.log(this.$store.getters.userInfo)
			return this.$store.getters.userInfo || {};
		},
	},
	data() {
		return {
			postForm: {
				careerAdvantages: '',
				companyName: '',
				endWorkDate: '',
				industryId: null,
				industryTypeId: null,
				isInternship: false,
				isShield: true,
				professionId: null,
				professionTypeId: null,
				startWorkDate: null,
				endWorkDate: null,
				resumeId: '',
				professionName: '',
				industryName: ''



			},
			industryName: '',
			professionName: '',
			value: '',
			sexList: getApp().globalData.sexList,
			eduList: getApp().globalData.education,
			experienceList: getApp().globalData.experience,
			jobSeekList: getApp().globalData.jobSeek,
			ProfessionList: [],
			professionIndex: 0,
			professionStatus: false,
			prePage: '',
			flag: null
		}
	},
	async onLoad(options) {
		if (options.page) {
			this.prePage = options.page
		}
		if (options.item) {

			this.postForm = JSON.parse(options.item)
			this.industryName = this.postForm.industryName
			this.professionName = this.postForm.professionName
			this.flag = options.flag
		}
		if (uni.getStorageSync('creat2Info')) {
			this.postForm = JSON.parse(uni.getStorageSync('creat2Info'))
			this.industryName = this.postForm.industryName
			this.professionName = this.postForm.professionName


		}
		if (options.resumeId) {
			this.postForm.resumeId = options.resumeId
		}
		this.getProfessionTree()
	},
	onShow() {

	},
	methods: {

		async getProfessionTree() {
			const { data } = await findProfessionTree()
			this.ProfessionList = data
		},
		changeTab(item, index) {
			this.professionIndex = index
		},
		changeSub(item) {
			this.postForm.professionId = item.id;
			this.postForm.professionTypeId = item.typeId;
			this.professionName = item.text
			this.professionStatus = false
		},
		changeSwitch(e, type) {

			if (type === 'isShield') this.postForm.isShield = e
			if (type === 'isInternship') this.postForm.isInternship = e
		},
		change(e, type) {

			if (type === 'start') this.postForm.startWorkDate = e.detail.value
			if (type === 'end') this.postForm.endWorkDate = e.detail.value
		},
		goIndustry() {
			uni.navigateTo({
				url: '/pages/index/industry?page=creat',
			});
		},
		toAdvantage() {
			if (this.postForm.professionId) {
				uni.navigateTo({
					url: `/pages/resume/advantage?professionId=${this.postForm.professionId}`,
				});
			} else {
				uni.showToast({
					title: '请先选择职位',
					icon: 'none'
				})
			}

		},
		showProfession() {
			this.professionStatus = true
		},
		async toNext(type) {
			this.postForm.professionName = this.professionName
			this.postForm.industryName = this.industryName
			this.postForm.isInternship = this.postForm.isInternship ? 1 : 0
			this.postForm.isShield = this.postForm.isShield ? 1 : 0
			if (!this.postForm.companyName) {
				uni.showToast({ title: '请先输入企业名称', icon: 'none' });
				return false;
			}
			if (!this.postForm.professionId) {
				uni.showToast({ title: '请先选择职位', icon: 'none' });
				return false;
			}
			if (!this.postForm.industryId) {
				uni.showToast({ title: '请先选择行业', icon: 'none' });
				return false;
			}
			if (!this.postForm.startWorkDate || !this.postForm.endWorkDate) {
				uni.showToast({ title: '请先选择在职时间', icon: 'none' });
				return false;
			}
			if (!this.postForm.careerAdvantages) {
				uni.showToast({ title: '请先选择职业优势', icon: 'none' });
				return false;
			}
			if (!this.postForm.careerAdvantages) {
				uni.showToast({ title: '请先输入工作内容', icon: 'none' });
				return false;
			}
			if (type === 'skip') {
				uni.navigateTo({
					url: '/pages/resume/creat3'
				})
			}
			if (type === 'next') {


				uni.setStorageSync('creat2Info', JSON.stringify(this.postForm))
				uni.navigateTo({
					url: '/pages/resume/creat3'
				})

			}
			if (type === 'save') {
				const api = this.flag === 'edit' ? editResumeWork : addResumeWork
				const { data } = await api(this.postForm)
				uni.navigateBack({
					delta: 1
				})
			}





		},

	}
}
</script>

<style lang="less" scoped>
@import url(index.less);

.content {
	display: flex;
	flex-direction: column;

	padding: 20upx;

}

.title {
	font-size: 20px;
	font-weight: bold;
	margin-bottom: 20px;
}

.resume-box {
	.resume-title {
		min-width: 200upx;
	}

	.form-cnt {
		width: calc(100% - 200upx);
	}

	.resume-input {
		width: calc(100% - 200upx);

		input {
			width: 100%;
			height: 50upx;
			line-height: 50upx;
		}
	}
}



.bottom {
	padding-bottom: calc(constant(safe-area-inset-bottom) + 22upx);
	/*兼容 IOS<11.2*/
	padding-bottom: calc(env(safe-area-inset-bottom) + 22upx);
	/*兼容 IOS>11.2*/
}

.color-0d0 {
	color: #0D0D12;
}
</style>